<!--
 * @Author: adolphus adolphus520@163.com
 * @Date: 2022-12-04 10:50:55
 * @LastEditors: 姚杰鸿
 * @LastEditTime: 2025-01-23 17:37:44
 * @Description: file content
-->
<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <el-row class="row-bg" justify="space-between">
          <el-col :span="3"></el-col>
          <el-col :span="12">
            <span class="title">系统登录</span>
          </el-col>
          <el-col :span="3"></el-col>
        </el-row>
      </div>
    </template>
    <el-form ref="signFormRef" :model="form" :rules="rules" @submit.prevent>
      <el-form-item prop="account">
        <el-input
          v-model="form.account"
          :prefix-icon="CreditCard"
          placeholder="手机号/邮箱/用户名"
          @keyup.enter="commit(signFormRef)"
        />
      </el-form-item>
      <el-form-item prop="authkey">
        <el-input
          v-model="form.authkey"
          type="password"
          placeholder="账户密码"
          show-password
          :prefix-icon="Lock"
          @keyup.enter="commit(signFormRef)"
        />
      </el-form-item>
      <el-row class="row-bg" justify="space-between">
        <el-col :span="4">
          <el-checkbox label="记住密码" v-model="remenberMe" />
        </el-col>
        <el-col :span="8"></el-col>
        <el-col :span="6">
          <el-button type="primary" plain @click="commit(signFormRef)">
            登录
          </el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-divider content-position="left">寻求帮助 </el-divider>
    <el-row class="row-bg" justify="space-between">
      <el-col :span="6">
        <el-link type="warning">
          <router-link v-slot="{ href }" to="/forgot-password.html">
            <a :href="href">找回密码</a>
          </router-link>
        </el-link>
      </el-col>
      <el-col :span="6"></el-col>
      <el-col :span="6"
        ><el-link type="success">
          <router-link v-slot="{ href }" to="/register.html">
            <a :href="href">注册</a>
          </router-link>
        </el-link></el-col
      >
    </el-row>
  </el-card>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, onActivated } from "vue";
import { CreditCard, Lock } from "@element-plus/icons-vue";
import { start, close } from "@/lib/global";
import { SignInApi } from "@/apis/home";
import type { FormInstance, FormRules } from "element-plus";
import { useStore, initCurUser } from "@/store";

// do not use same name with ref
const form = reactive({
    account: "",
    authkey: "",
    verificationCode: "",
  }),
  $store = useStore(),
  signFormRef = ref<FormInstance>(),
  rules = reactive<FormRules>({
    account: [{ required: true, message: "账户名信息必填", trigger: "blur" }],
    authkey: [{ required: true, message: "账户密码必填", trigger: "blur" }],
  }),
  remenberMe = ref(false),
  commit = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
      if (valid) {
        if (remenberMe.value) {
          localStorage.setItem("account", form.account);
          localStorage.setItem("authkey", form.authkey);
          localStorage.setItem("remenberme", "1");
        } else {
          localStorage.removeItem("account");
          localStorage.removeItem("authkey");
          localStorage.removeItem("remenberme");
        }
        start();
        SignInApi(form)
          .then((res) => {
            if (200 == res.status) {
              ElMessage.success("登录操作...");
              console.log(res.data);
              // TODO: $store.getters.getName; 补充用户信息
              $store.commit(initCurUser, res.data.data);
              setTimeout(() => {
                close();
                window.location.href = "/index.html";
              }, 2000);
            } else {
              close();
              ElMessage.error(res.data.msg);
            }
          })
          .catch((err) => {
            console.log(err);
            close();
            ElMessage.error(err.response.data.msg);
          });
      }
    });
  };

onMounted(() => {
  const account = localStorage.getItem("account");
  if (account) form.account = account;
  const authkey = localStorage.getItem("authkey");
  if (authkey) form.authkey = authkey;
  const remenberme = localStorage.getItem("remenberme");
  if (remenberme) remenberMe.value = true;
  else remenberMe.value = false;
});

onActivated(() => {
  if (!form.account && signFormRef.value) signFormRef.value.resetFields();
  if (history.state.account) {
    form.account = history.state.account + "";
    form.authkey = "";
    remenberMe.value = false;
  }
});
</script>

<style lang="scss" scoped>
.title {
  font-size: x-large;
  font-weight: 500;
}
.box-card {
  width: 300px;
}
</style>
